<template>
  <div>
    <!--   输入测试单号, 选取测试档, 输入测试条件以及测试板号   -->
    <el-row>
      <el-col :span="16">
        <el-card class="page_margin">
          <el-form :model="APP_FORM" inline :disabled="!APP_OPERATE_CONTROL">
            <el-row :gutter="20">

              <el-col :span="6">
                <el-form-item label="测试单号输入">
                  <el-input clearable placeholder="输入测试单号"
                            v-model="APP_FORM.APP_MANUFACTURE_ID"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="测试档选取">
                  <el-select v-model="APP_FORM.APP_PARAMETER_ID"
                             filterable
                             placeholder="选取切换测试档"
                             clearable
                  >
                    <el-option
                      v-for="item in parameter_list"
                      :key="item.id"
                      :label="item.label"
                      :value="item.id"
                      size="small"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="4">
                <el-form-item label="输入测试条件">
                  <el-input-number
                    style="width: 100%"
                    v-model="APP_FORM.judging"
                    controls-position="right"
                    :min="0"
                  ></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="4">
                <el-form-item label="输入测试板号">
                  <el-input-number
                    style="width: 100%"
                    v-model="APP_FORM.APP_BOARD_NO"
                    controls-position="right"
                    :min="0"
                  ></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="4">
                <el-form-item label="板号自动加一">
                  <el-switch
                    v-model="APP_FORM.APP_AUTO_BOARD"
                    active-text="是"
                    inactive-text="否">
                  </el-switch>
                </el-form-item>
              </el-col>

            </el-row>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="8">
        <!--    信息提示界面    -->
        <el-card class="page_margin" style="height: 100%">
          <el-input
            type="APP_TEXTAREA"
            :rows="4"
            placeholder="信息提示区域"
            v-model="APP_TEXTAREA">
          </el-input>
        </el-card>
      </el-col>
    </el-row>


    <el-row>
      <el-col :span="16">
        <el-card shadow="hover" class="page_margin">
          <el-checkbox-group v-model="SELECT_GROUP.APP_SELECT_UP_LIST"
                             :disabled="!APP_OPERATE_CONTROL"
                             @change="HandleCheckAllChange">
            <el-row>
              <el-col v-for="up in selectUp" :span="2">
                <el-checkbox :label="up" :key="up" border>{{up}}</el-checkbox>
              </el-col>
              <el-col :span="2">
                <el-button plain type="primary"
                           :disabled="!APP_OPERATE_CONTROL"
                           @click="allSelectUpCheck(1)">全选
                </el-button>
              </el-col>
              <el-col :span="2">
                <el-button plain type="info"
                           :disabled="!APP_OPERATE_CONTROL"
                           @click="allSelectUpCheck(0)">反选
                </el-button>
              </el-col>
            </el-row>
          </el-checkbox-group>
        </el-card>
        <!--   选取测试工位 1-10  -->
        <el-card class="page_margin">
          <el-checkbox-group v-model="SELECT_GROUP.APP_SELECT_DOWN_LIST"
                             :disabled="!APP_OPERATE_CONTROL"
                             @change="HandleCheckAllChange">
            <el-row>
              <el-col v-for="down in selectDown" :span="2">
                <el-checkbox :label="down" :key="down" border>{{down}}</el-checkbox>
              </el-col>
              <el-col :span="2">
                <el-button plain type="primary"
                           :disabled="!APP_OPERATE_CONTROL"
                           @click="allSelectDownCheck(1)">全选
                </el-button>
              </el-col>
              <el-col :span="2">
                <el-button plain type="info"
                           :disabled="!APP_OPERATE_CONTROL"
                           @click="allSelectDownCheck(0)">反选
                </el-button>
              </el-col>
            </el-row>
          </el-checkbox-group>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card shadow="hover" class="page_margin">
          <el-row>
            <el-col :span="4">
              显示当前测试的颗:
            </el-col>
            <el-col :span="6">
              <el-input-number
                style="width: 100%"
                v-model="APP_FORM.APP_BOARD_NO"
                controls-position="right"
                :min="0"
                :max="20"
                disabled
              ></el-input-number>
            </el-col>
            <!--            <el-col :span="12" offset="2">-->
            <!--              开始测试: 从当前测试颗位置开始测试;-->
            <!--              暂停测试: 缓存当前测试颗;-->
            <!--              结束测试: 刷新当前测试的位置为0-->
            <!--            </el-col>-->

            <!--   点击开始 暂停 停止   -->
          </el-row>
        </el-card>
        <el-card shadow="hover" class="page_margin">
          <!--   点击开始 暂停 停止   -->
          <el-row>
            <el-col :span="8">
              <el-button @click="LivStart" :disabled="!APP_OPERATE_CONTROL">开始测试</el-button>
            </el-col>
            <el-col :span="8">
              <el-button :disabled="APP_OPERATE_CONTROL">暂停测试</el-button>
            </el-col>
            <el-col :span="8">
              <el-button :disabled="APP_OPERATE_CONTROL">结束测试</el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-row style="height: 500px">
      <el-col :span="12">
        <el-card class="page_margin">
          <!--     放入table     -->
          <el-table
            height="490"
            size="small"
            :data="APP_RESULT_DATA.DATA"
            element-loading-text="Loading"
            border
            fit
          >
            <el-table-column
              v-for="(value,index) in APP_RESULT_DATA.HEAD"
              :key="index"
              :label="value"
              :prop="value"
            ></el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="page_margin">
          <!--     放入echarts     -->
          <Chart height="490px" :chart-data="APP_CHART_DATA"></Chart>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import Chart from "@/components/Echart"
  import {get_liv_echarts} from "@/utils/echarts/liv"
  // 驼峰法命名是用在vue中 下划线命名用于和python交互
  export default {
    name: "liv",
    components: {Chart},
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    data() {
      return {
        selectUp: [],
        selectDown: [],
        parameter_list: [], // 用axios去获取?

        APP_CHART_DATA: {},
        APP_RESULT_DATA: {
          DATA: [],
          HEAD: ["A", "B"],
        },
        APP_TEXTAREA: '',
        SELECT_GROUP: {
          APP_SELECT_UP_LIST: [],
          APP_SELECT_DOWN_LIST: [],
        },
        APP_OPERATE_CONTROL: true,
        APP_FORM: {
          APP_MANUFACTURE_ID: '',
          APP_PARAMETER_ID: null,
          APP_JUDGING: 0,
          APP_BOARD_NO: 0,
          APP_AUTO_BOARD: false,
        }
      }
    },
    created() {
      this.createSelect();
      this.$QtCallBackDict.__control_emit = this.SetAppOperateControl;
      this.$QtCallBackDict.__checkbox_emit = this.SetCheckBoxStates;
      this.$QtCallBackDict.__message_emit = this.SetMessageStates;
      this.$QtCallBackDict.__echarts_data_emit = this.SetEchartsData;
      this.$QtCallBackDict.__table_data_emit = this.SetTableData;
    },
    mounted() {
      console.log("get_app_status");
      this.$request('get_app_status');
    },
    methods: {
      createSelect() {
        for (let i = 1; i < 11; i++) {
          this.selectUp.push('S' + i.toString());
          this.selectDown.push('S' + (i + 10).toString())
        }
      },
      HandleCheckAllChange() {
        // 传入到qt中 有异常就会返回提示!
        // 这边的逻辑会先再前端勾选后 后端去判定后 又返回前端 相当于勾选了两次 如果用TEMP就比较麻烦
        this.$request('checkbox_change', this.SELECT_GROUP);
        console.log(this.SELECT_GROUP);
      },
      SetCheckBoxStates(SELECT_GROUP) {
        console.log("SetCheckBoxStates")
        this.SELECT_GROUP = SELECT_GROUP
      },
      SetAppOperateControl(APP_OPERATE_CONTROL) {
        this.APP_OPERATE_CONTROL = APP_OPERATE_CONTROL
      },
      SetMessageStates(APP_TEXTAREA) {
        console.log("APP_NOW_MESSAGE: " + APP_TEXTAREA)
        this.APP_TEXTAREA = APP_TEXTAREA
      },
      SetEchartsData(APP_CHART_DATA) {
        this.APP_CHART_DATA = APP_CHART_DATA
      },
      SetTableData(APP_RESULT_DATA) {
        this.APP_RESULT_DATA = APP_RESULT_DATA
      },
      LivStart() {
        this.$request('liv_start');
        this.$request('liv_start', this.APP_FORM);
      },
      allSelectUpCheck(val) {
        this.SELECT_GROUP.APP_SELECT_UP_LIST = val ? this.selectUp : [];
        this.HandleCheckAllChange()
      },
      allSelectDownCheck(val) {
        this.SELECT_GROUP.APP_SELECT_DOWN_LIST = val ? this.selectDown : [];
        this.HandleCheckAllChange()
      },
    }
  }
</script>

<style scoped>
  .page_margin {
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    height: 100%;
  }
</style>
